<template>
	<view class="findpu">
		<view class="findpu_heads">
			
			<!-- <view class="ordertabbar ordertabbartwo flex ali-c jus-a">
				<view class="tabitems actives">公开寻谱</view>
				<navigator url="/pages/celebrity/celebritylist/celebritylist" class="tabitems">名人馆</navigator>
			</view> -->
			<!-- <view class="embassy" :style="'padding-top:'+ (statusBarHeight+60) +'rpx'">
				<view class="embassy_img" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20231030/57f3cf74ce2b209498.png)'}"></view>
				<view class="embassy_nav">
					<view class="nav_text" v-if="nav_active!=1" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20231030/4e40d61de280af3a67.png)'}" @tap="tabnav(1)"></view>
					<view class="nav_text_a" v-if="nav_active==1" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20231030/10b407e94a708d92e7.png)'}"></view>
					<view class="nav_text" v-if="nav_active!=2" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20231030/c463cc1c7711b05f82.png)'}" @tap="tabnav(2)"></view>
					<view class="nav_text_a" v-if="nav_active==2" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20231030/71ae49a7a424e0ef27.png)'}"></view>
					<view class="nav_text_small" v-if="nav_active!=3" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20231030/13e2dafcbd48f1bf0f.png)'}" @tap="tabnav(3)"></view>
					<view class="nav_text_smalla" v-if="nav_active==3" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20231030/785fc8f963783c29ce.png)'}"></view>
				</view>
			</view> -->
			
			
			<view class="search_box_one">
				<view class="choice_sear">
					<image class="sear_img" :src="photo_cdn1+'zpupload/static/zuzhi/sousuo.png'" mode="widthFix"></image>
					<input v-model="keywords"  confirm-type="search" @confirm="searchfun" class="sear_text" placeholder="搜索您感兴趣的谱系" placeholder-style="color: #999999;"></input>
				</view>
			</view>			
		</view>
		
		<!-- #ifdef H5 -->
		<view class="scroll_people" v-if="f_zupu_list.length" :style="'padding-top:'+ (statusBarHeight+100) +'rpx'">
		<!-- #endif -->
		
		<!-- #ifndef H5 -->
		<view class="scroll_people" v-if="f_zupu_list.length" :style="'padding-top:'+ (statusBarHeight+100) +'rpx'">
		<!-- #endif -->
		
			<view class="tis_title">个性化推荐</view>
			<!-- <view class="lineage_list">
				<view class="lineage_text">族姓传承人</view>
				<view class="lineage_imglist">
					<view class="lineage_back" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20231021/913470d4febf4a5644.png)'}">
						<image @tap="tochat" class="lineage_img" :src="info.avatar" mode="aspectFill"></image>
					</view>
				</view>
			</view> -->
			<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="width: 100%; "   @scrolltolower="upper"   :style="{height: WinHeight +'px'}"  >
			
			<view @tap="toFamily(item)" v-for="(item,index) in f_zupu_list" :key="index" hover-class="none" class="zupus_item flex">
				<view class="peag">
					<image class="people_flag" :src="photo_cdn1+'zpupload/static/zupu/lable1.png'"></image>
					<view class="peag_text">{{item.family_name}}</view>
				</view>
				<!-- <view class="peag" v-if="item.type==1">
					<image class="people_flag" :src="photo_cdn1+'zpupload/static/zupu/lable2.png'"></image>
					<view class="peag_text">家谱</view>
				</view> -->
				<!-- <view class="peag" v-if="item.type==3">
					<image class="people_flag" :src="photo_cdn1+'zpupload/static/zupu/lable.png'"></image>
					<view class="peag_text">宗谱</view>
				</view> -->
				<view class="itemimgss">
					<image class="zpimgs" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/static/zupu/pushu.png)'}" mode=""></image>
					<view class="family_name">{{item.family_name}}{{ item.type | format_pu_type }}</view>
				</view>
				
				<view class="zupus_item_info flex1">
					<view class="zupu_names">{{item.family_name}}{{item.type | format_pu_type}}</view>					
					<view class="create_addr">{{item.addr}}</view>
					<view class="create_time">创建时间：{{item.createtime}}</view>
					
					<view class="item_info_foot flex ali-c">
						<image class="tximgs" :src="photo_cdn1+'zpupload/static/zupu/pushu.png'" mode=""></image>
						<view class="inheritors" @tap.stop="contactInheritorn(item)"><text class="tt_line">{{item.realname}}</text>（传承人）</view>
						<view class="punumtext">入谱人数：{{item.join_number}}</view>
					</view>
				</view>
			</view>
			</scroll-view>
		</view>
		
		<!-- <empty v-if="f_zupu_list.length==0"></empty>
		<q-tabbar :active="0" :count="[0,0,0,0,0]"></q-tabbar> -->
	</view>
</template>

<script>
	import {openFamilyList} from "@/utils/api/zupu.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	export default{
		props: { 
			idtype: {
				type:String ,
				default(){
					return;
				}
			},
		}, 
		data(){
			return{
				photo_cdn1,
				statusBarHeight:0,
				f_zupu_list:[],
				info:{},
				userinfo: [],
				page:0,
				keywords:'',
				family_id:'',
				imid:'',
				realname:'',
				isshowall:false,
				nav_active:2,
				WinHeight:500,
			}
		},
		watch:{
			idtype: { 
				handler(value) {
					
					if(value == 'nav2'){
						//获取设备高度
						this.WinHeight = uni.getWindowInfo().windowHeight - 130 ;
						this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
						this.userinfo = uni.getStorageSync('userinfo');// 防止需要在pageDataLoad使用到用户ID
						this.ws.pageFun(this.pageDataLoad, this);
						// if(this.f_zupu_list.length==0){
							this.page=0;
							this.isshowall = false;
							this.f_zupu_list = [];
							this.openFamilyListfun();
						// }
					}
				}
			}
		},
		created() {
			//获取设备高度
			this.WinHeight = uni.getWindowInfo().windowHeight - 130 ;
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
			this.userinfo = uni.getStorageSync('userinfo');// 防止需要在pageDataLoad使用到用户ID
			this.ws.pageFun(this.pageDataLoad, this);
			if(this.f_zupu_list.length==0){
				this.page=0;
				this.isshowall = false;
				this.f_zupu_list = [];
				this.openFamilyListfun();
			}
		},
		onLoad(option){
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
			this.family_id = option.family_id?option.family_id:'';
			this.realname = option.realname?option.realname:'';	
			this.userinfo = uni.getStorageSync('userinfo');// 防止需要在pageDataLoad使用到用户ID
		},
		onShow() {
			this.ws.pageFun(this.pageDataLoad, this);
			if(this.f_zupu_list.length==0){
				this.page=0;
				this.isshowall = false;
				this.f_zupu_list = [];
				this.openFamilyListfun();
			}
		},
		methods:{
			pageDataLoad: function (refresh = false) {
				var that = this
				this.ws.send({
					c: 'User',
					a: 'infoDetail',
					data: {
						'method': 'get',
						'type': 'user',
						'id': that.imid ? that.imid:that.userinfo.id,
						'requestor': that.userinfo.id,
						'refresh': refresh,
						'notitle':'findpu'
					}
				})
			},
			upper: function(e) {
				console.log(e)
				this.openFamilyListfun();
			},
			onPullDownRefresh() {
				this.page=0;
				this.isshowall = false;
				this.f_zupu_list = [];
				this.keywords = '';
				this.openFamilyListfun();
				setTimeout(()=>{
					uni.stopPullDownRefresh(); //结束下拉刷新
				},2000)
			},
			onReachBottom() {
				if(!this.isshowall){
					this.openFamilyListfun();
				}else{
					this.$api.msg('没有更多了~');
				}
			},
			openFamilyListfun(){
				this.page++
				openFamilyList({
					page:this.page,
					keywords:this.keywords				
				}).then((res)=>{
					if(res.code==1){						
						this.f_zupu_list = [...this.f_zupu_list,...res.data.list];
						if(res.data.list.length){
							this.imid = res.data.list[0].fastim_id
						}
						
						if(res.data.list.length==0){
							this.isshowall = true;
							if(this.page>1){
								this.$api.msg('没有更多了~');
							}
						}else{
							this.isshowall = false;
						}
					}else{
					
					}
				})
			},
			searchfun(){
				this.page = 0;
				this.isshowall = false;
				this.f_zupu_list = [];
				this.openFamilyListfun();
			},
			//查看族谱
			toFamily(item){
				uni.navigateTo({
					url:`/pages/zupu/findpu_info/findpu_info?family_id=${item.id}`
				})
			},
			//联系传承人
			contactInheritorn(item){
				uni.navigateTo({
					url:`/pagesim/center/info?id=${item.fastim_id}`
				})
			},
			tochat(){
				uni.navigateTo({
					url:`/pagesim/center/info?id=${this.imid}`
				})
			},
			//tab切换
			tabnav(item){
				if(this.nav_active==item){
					return false;
				}else{
					this.nav_active = item
				}
				if(this.nav_active==1){
					uni.switchTab({
						url:'/pages/index/index'
					})				
				}
				if(this.nav_active==3){
					uni.redirectTo({
						url:'/pages/celebrity/celebritylist/celebritylist'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./findpu.scss"
</style>